<template>
  <div class="content content51" v-if="initFlag">
    <div class="innertitle">
      1.照射野的数字指示和光野指示
    </div>
    <div class="innertitle">
      1.1 照射野的数字指示 <span style="font-weight: normal;">
        <el-radio-group v-model="form.digitalIndication.beamDevice">
            <el-radio :label="1">单元限束装置</el-radio>
            <el-radio :label="2">多元限束装置</el-radio>
        </el-radio-group>
      </span>
    </div>
    <div>机架角度：0°，线束系统：0°，NTD：<el-input v-model="form.digitalIndication.ntd" class="input-line" />cm，X射线能量档：<el-input v-model="form.digitalIndication.xEnergy" class="input-line" />MV</div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td>治疗距离</td>
        <td>照射野大小</td>
        <td>辐射野实际大小</td>
        <td>偏差</td>
      </tr>
      <tr v-for="trIndex in digitalIndication.table.tr" :key="trIndex">
        <td v-if="trIndex == 1">NTD</td>
        <td v-else class="multipleInput"><el-input v-model="form.digitalIndication.ntdName" class="input-line" />NTD</td>
        <td><el-input v-model="form.digitalIndication['irradiationField_'+trIndex]" class="input-line" /></td>
        <td class="multipleInput">AB：<el-input v-model="form.digitalIndication['radiationField_AB_'+trIndex]" class="input-line" />cm；GT：<el-input v-model="form.digitalIndication['radiationField_GT_'+trIndex]" class="input-line" />cm </td>
        <td class="multipleInput">AB：<el-input v-model="form.digitalIndication['error_AB_'+trIndex]" class="input-line" />cm；GT：<el-input v-model="form.digitalIndication['error_GT_'+trIndex]" class="input-line" />cm </td>
      </tr>
    </table>
    <div class="innertitle">
      1.2 辐射束轴在患者入射表面上的位置指示
    </div>
    <div>机架角度：0°，线束系统：0°，NTD：<el-input v-model="form.positionIndication.ntd" class="input-line" />cm，预置剂量：<el-input v-model="form.positionIndication.presetDose" class="input-line" />Gy X射线能量档：<el-input v-model="form.positionIndication.xEnergy" class="input-line" />MV</div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td>治疗距离</td>
        <td>照射野大小</td>
        <td>辐射束轴的实际位置与指示点的最大偏差（mm）</td>
      </tr>
      <tr v-for="trIndex in positionIndication.table.tr" :key="trIndex">
        <td>NTD</td>
        <td>10cm×10cm</td>
        <td><el-input v-model="form.positionIndication['maxError_'+trIndex]" class="input-line" /></td>
      </tr>
    </table>
    <div class="innertitle">
      2.等中心
    </div>
    <div class="innertitle">
      2.1 辐射轴相对于等中心点的偏移
    </div>
    <div>
      FS：10cm×10cm  NTD：<el-input v-model="form.offsetCenterPoint.ntd" class="input-line" />cm 预置剂量：<el-input v-model="form.offsetCenterPoint.presetDose" class="input-line" />Gy  X射线能量档：<el-input v-model="form.offsetCenterPoint.xEnergy" class="input-line" />MV  剂量率：<el-input v-model="form.offsetCenterPoint.doseRate" class="input-line" />Gy/min
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td>机架角度（°）</td>
        <td>限束系统角度（°）</td>
        <td>最大偏移（mm）</td>
      </tr>
      <tbody v-for="(trItem,trIndex) in offsetCenterPoint.table" :key="trIndex">
        <tr v-for="(tdItem,tdIndex) in trItem">
          <td :rowspan="trItem.length" v-if="tdIndex==0">{{trIndex}}</td>
          <td>{{tdItem}}</td>
          <td><el-input v-model="form.offsetCenterPoint['shifting_'+trIndex+'_'+tdItem]" class="input-line" /></td>
        </tr>
      </tbody>
    </table>
    <div class="innertitle">
      2.2 等中心的指示（激光灯）
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td>机架角度（°）</td>
        <td>限束系统角度（°）</td>
        <td>最大偏移（mm）</td>
      </tr>
      <tr v-for="trIndex in waitingIntermediateInstructions.table.tr" :key="trIndex">
        <td><el-input v-model="form.waitingIntermediateInstructions['gantryAngle_'+trIndex]" class="input-line" /></td>
        <td><el-input v-model="form.waitingIntermediateInstructions['systemAngle_'+trIndex]" class="input-line" /></td>
        <td><el-input v-model="form.waitingIntermediateInstructions['shifting_'+trIndex]" class="input-line" /></td>
      </tr>
    </table>
    <div class="innertitle">
      3、旋转运动标尺的零刻度位置
    </div>
    <div>限束系统装置：0°</div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td>位置</td>
        <td>治疗距离</td>
        <td>角度（°）</td>
        <td>结果</td>
      </tr>
      <tr>
        <td>机架旋转轴</td>
        <td class="multipleInput">NTD+25cm=<el-input v-model="form.zeroScalePosition.rack_distance" class="input-line" />cm</td>
        <td>0</td>
        <td><el-input v-model="form.zeroScalePosition.rack_result" class="input-line" /></td>
      </tr>
      <tr>
        <td rowspan="2">限束系统旋转轴</td>
        <td rowspan="2">——</td>
        <td>90</td>
        <td rowspan="2"><el-input v-model="form.zeroScalePosition.system_result" class="input-line" /></td>
      </tr>
      <tr>
        <td>270</td>
      </tr>
      <tr>
        <td>治疗床面纵向旋转轴</td>
        <td>——</td>
        <td>0</td>
        <td><el-input v-model="form.zeroScalePosition.direction_result" class="input-line" /></td>
      </tr>
      <tr>
        <td>治疗床面横向旋转轴</td>
        <td>——</td>
        <td>0</td>
        <td><el-input v-model="form.zeroScalePosition.transverse_result" class="input-line" /></td>
      </tr>
    </table>
    <div class="innertitle">
      4、治疗床的运动精度
    </div>
    <div>
      限束系统装置：0°，床面负载：70kg，FS：10cm×10cm，X射线能量档：<el-input v-model="form.kinematicPrecision.xEnergy" class="input-line" />MV，预置剂量：<el-input v-model="form.kinematicPrecision.presetDose" class="input-line" />Gy
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <template v-for="tbodyIndex in kinematicPrecision.table.tbody">
        <tr>
          <td rowspan="2">{{tbodyIndex==1?'垂直运动':(tbodyIndex==2)?'横向运动':'前后运动'}}</td>
          <td>条件{{(tbodyIndex-1)*2+1}}</td>
          <td class="multipleInput">NTD：<el-input v-model="form.kinematicPrecision['ntd_'+tbodyIndex]" class="input-line" />cm</td>
          <td rowspan="2" class="multipleInput">条件{{(tbodyIndex-1)*2+1}}、{{tbodyIndex*2}}照射野中心的相对位移<el-input v-model="form.kinematicPrecision['shift_'+tbodyIndex]" class="input-line" />mm</td>
        </tr>
        <tr>
          <td>条件{{tbodyIndex*2}}</td>
          <td class="multipleInput" v-if="tbodyIndex == 1">NTD+20cm：<el-input v-model="form.kinematicPrecision.ntd20" class="input-line" />cm</td>
          <td v-else-if="tbodyIndex == 2">床面相对于条件3横向移动20cm</td>
          <td v-else>床面相对于条件5前后移动20cm</td>
        </tr>
      </template>
    </table>
    <div class="innertitle">
      5、治疗床运动的刚度
    </div>
    <div>
      限束系统装置：0°，床面负载：70kg。
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td rowspan="2">纵向<br/>（高度的变化）</td>
        <td>条件1</td>
        <td>床面缩回</td>
        <td class="multipleInput" rowspan="2" style="min-width: 150px;">条件1、2治疗床的光野中心的高度变化 <el-input v-model="form.kinematicStiffness.change_1" class="input-line" />mm</td>
      </tr>
      <tr>
        <td>条件2</td>
        <td>床面伸出</td>
      </tr>
      <tr>
        <td>横向<br/>（侧向倾斜角度）</td>
        <td>条件3</td>
        <td>治疗床垂直升降高度范围</td>
        <td class="multipleInput">测量治疗床床面相对于水平面的侧向倾斜角度为<el-input v-model="form.kinematicStiffness.angle" class="input-line" />°</td>
      </tr>
      <tr>
        <td>横向<br/>（高度的变化）</td>
        <td>条件4</td>
        <td>治疗床最大横向位移</td>
        <td class="multipleInput">治疗床床面在等中心附近的高度变化为<el-input v-model="form.kinematicStiffness.change_2" class="input-line" />mm</td>
      </tr>
    </table>
    <div class="innertitle">
      6、治疗床等中心的旋转
    </div>
    <div>
      限束系统装置：0°，床面负载：70kg，床面近似于等中心旋转，等中心位置的最大偏差<el-input v-model="form.isocentricRotation.error" class="input-line" /> mm。
    </div>
  </div>
</template>

<script>
  import {getInfoById, postInfo} from '@/api/testItem/item51';
  export default{
    name:'mechanicalPerformancePart',
    props: {
    	// tab栏
      activeTab: {
    		type: String,
        default: "0",
      },
    	// 基本信息数据
      basicForm: {
    		type: Object,
        default: () => {
    			return {}
    		},
      },
    },
    data(){
      return{
        initFlag:false,
        digitalIndication:{
          action:'digitalIndication',
          flag:true,
          loading:false,
          notNumber:['beamDevice','irradiationField','ntdName'],
          intNumber:[],
          like:true,
          table:{
            tr:2
          }
        },
        positionIndication:{
          action:'positionIndication',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
          table:{
            tr:2
          }
        },
        offsetCenterPoint:{
          action:'offsetCenterPoint',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
          table:{
            '0':['0','90','180'],
            '45':['0','90','180'],
            '135':['0','90','180'],
            '270':['0','90','180']
          }
        },
        waitingIntermediateInstructions:{
          action:'waitingIntermediateInstructions',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
          table:{
            tr:8
          }
        },
        zeroScalePosition:{
          action:'zeroScalePosition',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
        },
        kinematicPrecision:{
          action:'precision',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
          table:{
            tbody:3
          }
        },
        kinematicStiffness:{
          action:'kinematicStiffness',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
        },
        isocentricRotation:{
          action:'isocentricRotation',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
        },
        form:{
          digitalIndication:{

          },
          positionIndication:{

          },
          offsetCenterPoint:{

          },
          waitingIntermediateInstructions:{

          },
          zeroScalePosition:{

          },
          kinematicPrecision:{

          },
          kinematicStiffness:{

          },
          isocentricRotation:{

          },
        }
      }
    },
    watch:{
      activeTab:{
        handler(val) {
          this.$nextTick(()=>{
            if(val == 1){
              let resultId = this.basicForm.resultId;
              getInfoById(resultId).then(response => {
                if(response.code == 200){
                  let data = response.data;
                  for(let keys in data){
                    this.setData(keys,data[keys]);
                  }
                   setTimeout(()=>{
                     this.initFlag = true;
                   },300)
                }
              }).catch((response) => {
                 this.$emit("loadingchange", true);
               });
               }
            });
        },
        deep: true,
        immediate: true
      },
      "form.digitalIndication":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'digitalIndication');
         }
        },
        deep:true,
      },
      "form.positionIndication":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'positionIndication');
         }
        },
        deep:true,
      },
      "form.offsetCenterPoint":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'offsetCenterPoint');
         }
        },
        deep:true,
      },
      "form.waitingIntermediateInstructions":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'waitingIntermediateInstructions');
         }
        },
        deep:true,
      },
      "form.zeroScalePosition":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'zeroScalePosition');
         }
        },
        deep:true,
      },
      "form.kinematicPrecision":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'kinematicPrecision');
         }
        },
        deep:true,
      },
      "form.kinematicStiffness":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'kinematicStiffness');
         }
        },
        deep:true,
      },
      "form.isocentricRotation":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'isocentricRotation');
         }
        },
        deep:true,
      },
    },
    methods:{
      //修改数据
      setData(name,data){
        this.form[name] = data ? data : (this[name] ? {}:null);
      },
      //表单修改提交后端
       postForm(param,name){
         param['itemsId'] = this.form.itemsId;
         this.$emit("loadingchange", true);
      	 postInfo(param,this[name].action).then(res=>{
      		 this.$emit("loadingchange", false);
      		 if(res.code == 200){
      			 this[name].flag = false;
      			 if(name != 'sdd'){
      				this.setData(name,res.data);
      			 }
      		 }
      	 })
      },
      validateType(arr,keys,obj){
      	if(obj.like){
      		for(let i=0;i<arr.length;i++){
      			if(keys.indexOf(arr[i]) != -1){
      				return true;
      			}
      		}
      		return false;
      	}else{
      		if(arr.indexOf(keys) != -1){
      			return true;
      		}
      		return false;
      	}
      },
       //数据验证
       validateData(newName,myName){
      	 if(!this[myName].noClear){
      		clearTimeout(this[myName].loading);
      	 }else{
      		 this[myName].noClear = false;
      	 }
         let regNumber = /^[-]?\d*([.](\d+))?$/;//小数验证正则
         let regRepNumber = /[^-?\d.,]/g;//将除小数外的符号消除正则
         let regInt = /^\d*$/;//整数验证正则
         let regRepInt = /[^-?\d,]/g;//将除小数外的符号消除正则
         let reg,regRep;
         let repStr = '';
      	 let intResult
         if(JSON.stringify(newName) != '{}'){
           //遍历该对象所有字段进行验证
           for(let keys in newName){
             //数字验证环节
      			 if((typeof newName[keys] == 'string') ||  (typeof newName[keys] == 'number')){
      				if(newName[keys] && !this.validateType(this[myName].notNumber,keys,this[myName])){
      					intResult = this.validateType(this[myName].intNumber,keys,this[myName]);
      					reg = intResult ? regInt:regNumber;
      				  let bool = !reg.test(newName[keys]);
      				  if(bool){
      						setTimeout(()=>{
      							intResult = this.validateType(this[myName].intNumber,keys,this[myName]);
      							regRep = intResult ? regRepInt:regRepNumber;
      									repStr = newName[keys] + '';
      							repStr =  repStr.replace(regRep,'');
      							if(repStr != (newName[keys]+'')){
      								if(!this[myName].noClear){
      									this[myName].noClear = true;
      								}
      								newName[keys] = repStr;
      							}
      						},100);
      						if(this[myName].flag){
      						 this[myName].flag = false;//如果数字验证不通过不需要请求后端
      						}
      				  }
      				}
      			 }
           }
      		 this.isPost(newName,myName);
         }
       },
       isPost(newName,myName){
      	 if(this[myName].flag){//是否请求后端判断
      	  let postBody = {};
      	  for(let i in newName){
      	    if(newName[i] !== null && newName[i] !== undefined){
      	      postBody[i] = newName[i];
      	    }
      	  }
      	  if(JSON.stringify(postBody) != '{}'){
      			this[myName].loading = setTimeout(()=>{
      				this.postForm(postBody,myName);
      			},800)
      	  }
      	 }else{
      		 this[myName].flag = true;
      	 }
       },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../content.scss';

  .miniFont {
    font-size: 10px;
  }

  .miniFontCenter {
    margin-top: 8px;
  }

  .content51 {
    padding-inline: 0 !important;
    ::v-deep .el-input__suffix{
      display: none;
    }
    .latex{
      margin-top: 15px;
    }
    table {
      width: 100%;

      td {
        max-width: 100px;

        ::v-deep .el-checkbox__label {
          white-space: break-spaces;
        }
      }

      .el-input {
        width: 100% !important;
      }

      .multipleInput {
        .el-input {
          width: 50px !important;
        }
      }
    }

    .innertitle {
      display: block;
      margin-left: 0;
    }

    .table1 {
      .el-radio {
        display: flex;
        align-items: center;
      }
    }

    #hearderTR td:nth-child(7) {
      display: none;
    }
  }
</style>
